<template>
  <a-drawer
    :title="title"
    :width="900"
    placement="right"
    :closable="false"
    @close="close"
    :visible="visible"
  >
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="24">
            <a-form-item label="来源单据">
              <j-dict-select-tag v-model="queryParam.sourceType" placeholder="请选择来源单据" dictCode="stock_source_type"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="业务类型">
              <j-dict-select-tag v-model="queryParam.bizType" placeholder="请选择业务类型" dictCode="stock_biz_type"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="库存类型">
              <j-dict-select-tag v-model="queryParam.stockType" placeholder="请选择库存类型" dictCode="stock_type"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="出入库类型">
              <j-dict-select-tag v-model="queryParam.inoutType" placeholder="请选择出入库类型" dictCode="inout_type"/>
            </a-form-item>
          </a-col>
          <a-col :md="14" :sm="24">
            <a-form-item label="下单时间">
              <a-range-picker format="YYYY-MM-DD HH:mm:ss"
                              :show-time="{
                                hideDisabledOptions: true,
                                defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                              }"
                              :placeholder="['开始时间', '结束时间']"
                              @change="onCreateTimeChange"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="listData"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange">
      </a-table>
    </div>
<!--    <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
      <a-list-item slot="renderItem" key="item.id" slot-scope="item, index">
        <a-descriptions bordered :size="small">
          <a-descriptions-item :label="item.sourceType_dictText">
            <span>
              {{item.sourceId}}
            <br>
              {{item.createTime}}
            </span>
          </a-descriptions-item>
          <a-descriptions-item :label="item.stockType_dictText">
            {{item.bizType_dictText}}
          </a-descriptions-item>
          <a-descriptions-item :label="item.inoutType_dictText">
            <span style= "display:inline ">
              {{item.oldStock}}
              <span v-if="item.inoutType.toLocaleUpperCase() === 'STOCK_IN'">+</span>
              <span v-else>-</span>
              {{item.quantity}}
            </span>
          </a-descriptions-item>
        </a-descriptions>
      </a-list-item>
    </a-list>-->
  </a-drawer>
</template>

<script>
  import { httpAction } from '@/api/manage'
  import { getAction } from '@/api/manage'
  import moment from 'moment';
  import {filterObj} from '@/utils/util'
  import pick from 'lodash.pick'

  export default {
    name: 'StmStockRecordModal',
    components: {},
    data() {
      return {
        title:"库存流水",
        moment,
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        model: {},
        loading:false,
        listData: [],
        // 查询条件
        queryParam: {},
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title: '来源单据',
            align:"center",
            dataIndex: 'sourceType_dictText'
          },
          {
            title: '来源单号',
            align:"center",
            dataIndex: 'sourceId'
          },
          {
            title: '发生时间',
            align:"center",
            dataIndex: 'createTime'
          },
          {
            title: '业务类型',
            align:"center",
            dataIndex: 'bizType_dictText'
          },
          {
            title: '库存类型',
            align:"center",
            dataIndex: 'stockType_dictText'
          },
          {
            title: '出入库类型',
            align:"center",
            dataIndex: 'inoutType_dictText'
          },
          {
            title: '变动数量',
            align:"center",
            dataIndex: 'quantityStr'
          }
        ],
        /* 排序参数 */
        isorter:{
          column: 'createTime',
          order: 'desc',
        },
        pagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        url: {
          listByStockId: '/stm/stmStock/listStmStockRecordByStockId',
        }
      }
    },
    created() {
    },
    methods: {
      show(record) {
        this.queryParam = {};
        this.visible = true
        this.model = Object.assign({}, record);
        //console.log('this.model.processStatus',this.model.processStatus)
        // 加载子表数据
        if (this.model.id) {
          console.log(this.model.id)
          this.loadStockRecordData(1);
        }
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      getQueryField() {
        //TODO 字段权限控制
      },
      onCreateTimeChange: function(value, dateString) {
        console.log(dateString[0], dateString[1])
        this.queryParam.createTime_begin = dateString[0]
        this.queryParam.createTime_end = dateString[1]
      },
      handleTableChange(pagination, filters, sorter) {
        //分页、排序、筛选变化时触发
        //TODO 筛选
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field;
          this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
        }
        this.pagination = pagination;
        this.loadStockRecordData();
      },
      searchQuery() {
        this.loadStockRecordData(1);
      },
      searchReset() {
        this.queryParam = {}
        this.loadStockRecordData(1);
      },
      getQueryParams() {
        this.queryParam.stockId = this.model.id;
        let param = Object.assign({}, this.queryParam, this.isorter);
        param.field = this.getQueryField();
        param.pageNo = this.pagination.current;
        param.pageSize = this.pagination.pageSize;
        return filterObj(param);
      },
      loadStockRecordData(arg) {
        //let params = { stockId: this.model.id }
        if (arg === 1) {
          this.pagination.current = 1;
        }
        let params = this.getQueryParams();//查询条件
        this.loading = true
        this.listData = []
        getAction(this.url.listByStockId, params).then((res) => {
          if (res.success) {
            res.result.records.forEach(record => {
              if (record.inoutType.toLocaleUpperCase() == 'STOCK_OUT') {
                record.quantityStr = '-' + record.quantity;
              } else {
                record.quantityStr = '+' + record.quantity;
              }
            })
            this.listData = res.result.records;
            this.pagination.total = res.result.total;
          }
          this.loading = false
        })
      },
      handleCancel() {
        this.close()
      },
    }
  }
</script>

<style lang="less" scoped>
</style>